<template>
  <div>
    <div class="seachcity">
       <input type="text" class="seach" placeholder="输入城市名或拼音" v-model="shousuo" >
    </div>
    <div class="vague-search" v-show="shousuo != ''"><!-- 双向绑定输入框的值。如果输入为空此div隐藏 -->
      <ul>
        <li class="border-bottom" v-for="item of xinlist" :key="item.id" @click="handleCity(item.name)">{{ item.name }}</li>
        <li v-if="iskong">内容为空，没有该数据</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Search',
  props: {
    list: Object
  },
  data () {
    return {
      shousuo: '',
      xinlist: []
    }
  },
  computed: {
    iskong () {
      return this.xinlist.length === 0
    }
  },
  methods: {
    handleCity (city) {
      this.$router.push('/')
      this.$store.dispatch('selectCity', city)
    }
  },
  watch: {
    shousuo () {
      let result = [] // 保存搜索数据
      for (let key in this.list) {
        // console.log(this.list[key]) // 所有字母之后的属性值--数组
        this.list[key].forEach((obj, index) => {
          if (obj.spell.indexOf(this.shousuo) !== -1 || obj.name.indexOf(this.shousuo) !== -1) {
            result.push(obj)
          }
        })
      }
      this.xinlist = result
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  @import '~@/assets/css/variable.styl'
.seachcity
 position fixed
 top 0.88rem
 left 0rem
 width 100%
 z-index 99
 overflow hidden
 padding 0 0.1rem
 padding-bottom 0.1rem
 background-color $bgcolor
.seach
 width 100%
 border-radius 0.08rem
 height 0.62rem
 text-align center
 font-size .32rem
.vague-search
 position absolute
 top 1.6rem
 left 0rem
 right 0rem
 bottom 0rem
 background #EEEEEE
 z-index 1
 li
  line-height 0.7rem
  background-color #FFFFFF
  padding-left 0.2rem
</style>
